<template>
  <main class="page">
    <div class="search-wrapper">
      <el-input
        v-model="searchText"
        placeholder="搜索职位 / 公司 / 关键词"
        size="large"
        clearable
        class="search-input"
        @keyup.enter="handleSearch"
        @clear="handleClearSearch"
      >
        <template #append>
          <el-button 
            type="primary" 
            size="large" 
            @click="handleSearch"
            :loading="esLoading"
          >搜索</el-button>
        </template>
      </el-input>
      
      <!-- 搜索历史 -->
      <div v-if="showHistory && esSearchHistory.length > 0" class="search-history">
        <div class="history-header">
          <span class="history-title">搜索历史</span>
          <el-button 
            text 
            type="danger" 
            size="small" 
            @click="esClearSearchHistory"
          >清空</el-button>
        </div>
        <div class="history-tags">
          <el-tag
            v-for="(item, index) in esSearchHistory"
            :key="index"
            class="history-tag"
            @click="handleHistoryClick(item)"
          >
            {{ item }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- ES搜索结果 -->
    <div v-if="showSearchResults" class="search-results-section">
      <div class="results-header">
        <h3>搜索结果 (共 {{ esTotal }} 条)</h3>
        <el-button @click="handleClearSearch">返回首页</el-button>
      </div>
      
      <el-skeleton v-if="esLoading" :rows="6" animated />
      
      <div v-else-if="esSearchResults.length > 0" class="results-grid">
        <div 
          v-for="result in esSearchResults" 
          :key="result.id" 
          class="result-card"
        >
          <div class="result-content">
            <h4 class="result-title">{{ result.data.name || result.data.title || '未命名' }}</h4>
            <p class="result-desc">
              <span v-if="result.data.level">层级: {{ result.data.level }}</span>
              <span v-if="result.data.sort_order"> | 排序: {{ result.data.sort_order }}</span>
              <span v-if="result.data.is_active !== undefined"> | 状态: {{ result.data.is_active ? '启用' : '禁用' }}</span>
            </p>
            <p class="result-time" v-if="result.data.created_at">
              创建时间: {{ new Date(result.data.created_at).toLocaleString('zh-CN') }}
            </p>
          </div>
        </div>
      </div>
      
      <el-empty v-else description="未找到相关结果" />
      
      <!-- 分页 -->
      <div v-if="esTotalPages > 1" class="search-pagination">
        <el-pagination
          v-model:current-page="esCurrentPage"
          :page-size="esPageSize"
          :total="esTotal"
          layout="prev, pager, next, total"
          @current-change="handlePageChange"
        />
      </div>
    </div>

    <div class="mega" @mouseleave="handleMegaLeave">
      <aside class="mega-left" @mouseenter="handleLeftEnter" @mouseleave="handleLeftLeave">
        <template v-if="categoriesFirstLoading">
          <el-skeleton :rows="5" animated>
            <template #template>
              <div class="mega-item">
                <el-skeleton-item variant="text" class="skeleton-line" />
              </div>
            </template>
          </el-skeleton>
          <div class="pager">
            <span>正在加载...</span>
          </div>
        </template>
        <template v-else>
          <div
            v-for="(c, idx) in categories.slice((currentPage-1)*pageSize, (currentPage-1)*pageSize + pageSize)"
            :key="c.id"
            class="mega-item"
            :class="{ active: ((currentPage-1)*pageSize + idx) === activeIndex }"
            @mouseenter="activeIndex = (currentPage-1)*pageSize + idx"
          >
            <span class="mega-name">{{ c.name }}</span>
            <span class="mega-hot" v-if="c.hot && c.hot.length">
              <span v-for="h in c.hot" :key="h" class="hot-tag">{{ h }}</span>
            </span>
            <i class="arrow">›</i>
          </div>
          <div class="pager">
            <span>{{ currentPage }} / {{ Math.max(1, Math.ceil(categories.length / pageSize)) }}</span>
          </div>
        </template>
      </aside>
      <section class="mega-right" @mouseenter="handleRightEnter" @mouseleave="handleRightLeave">
        <template v-if="categoriesFirstLoading">
          <div class="right-loading">
            <el-skeleton :rows="6" animated style="width: 90%" />
          </div>
        </template>
        <template v-else-if="(isHoverLeft || isHoverRight || hoverGraceActive) && categories.length">
          <div v-for="grp in categories[activeIndex].groups" :key="grp.title" class="group">
            <div class="group-title">{{ grp.title }}</div>
            <div class="group-items">
              <a v-for="it in grp.items" :key="it" class="group-link">{{ it }}</a>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="carousel-wrapper">
            <el-carousel height="360px" indicator-position="outside" trigger="hover" :interval="3000" :autoplay="true">
              <el-carousel-item v-for="(img, i) in aiBanners" :key="i">
                <img :src="img" class="banner-img" alt="AI banner" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </template>
      </section>
    </div>
    <!-- 底部分页箭头控制 -->
    <div class="mega-pager" v-if="categories.length">
      <button class="pager-btn" @click="prevPage" :disabled="!categories.length">‹</button>
      <span class="pager-text">{{ currentPage }} / {{ Math.max(1, Math.ceil(categories.length / pageSize)) }}</span>
      <button class="pager-btn" @click="nextPage" :disabled="!categories.length">›</button>
    </div>
    <section class="jobs">
      <div class="jobs-head">
        <div class="jobs-title">精选职位</div>
        <div class="jobs-tabs">
          <span class="jobs-tab" :class="{active: jobTab === 'featured'}" @click="jobTab = 'featured'">精选职位</span>
          <span class="jobs-tab" :class="{active: jobTab === 'latest'}" @click="jobTab = 'latest'">最新职位</span>
        </div>
      </div>
      <div class="jobs-grid">
        <div v-for="j in (jobTab === 'featured' ? jobsFeatured : jobsLatest)" :key="j.id" class="job-card">
          <div class="job-row">
            <div class="job-title">{{ j.title }}</div>
            <div class="job-salary">{{ j.salary }}</div>
          </div>
          <div class="job-meta">{{ j.edu }}</div>
          <div class="job-footer">
            <img :src="j.logo" class="job-logo" alt="logo" />
            <span>{{ j.company }}</span>
            <span>·</span>
            <span>{{ j.city }}</span>
          </div>
        </div>
      </div>
    </section>
    <section class="companies">
      <div class="companies-head">
        <div class="companies-title">热门企业</div>
      </div>
      <div class="companies-grid">
        <div v-for="c in companies" :key="c.id" class="company-card">
          <div class="company-top">
            <img :src="c.logo" class="company-logo" alt="logo" />
            <div class="company-info">
              <div class="company-name">{{ c.name }}</div>
              <div class="company-tags">
                <span v-for="t in c.tags" :key="t" class="tag">{{ t }}</span>
              </div>
            </div>
          </div>
          <div class="company-jobs">
            <div v-for="j in c.jobs" :key="j.title" class="company-job">
              <div class="cj-title">{{ j.title }}</div>
              <div class="cj-salary">{{ j.salary }}</div>
              <div class="cj-meta">{{ j.meta }}</div>
            </div>
          </div>
<!--          <div class="company-more">-->
<!--            <el-button size="small" plain type="success">查看更多职位</el-button>-->
<!--          </div>-->
        </div>
      </div>
    </section>
  </main>
</template>

<script>
import { getCategories } from '@/api/category.js'
import { useElasticSearch } from '@/composables/useElasticSearch.js'
import { onMounted, computed, ref } from 'vue'

export default {
  name: 'Hrview',
  setup() {
    // ES搜索功能（搜索分类数据）
    const ES_INDEX = 'category_category_index'
    const {
      searchKeyword: esSearchKeyword,
      searchResults: esSearchResults,
      searchHistory: esSearchHistory,
      loading: esLoading,
      currentPage: esCurrentPage,
      pageSize: esPageSize,
      total: esTotal,
      totalPages: esTotalPages,
      search: esSearch,
      searchPage: esSearchPage,
      loadSearchHistory: esLoadSearchHistory,
      clearSearchHistory: esClearSearchHistory,
      resetSearch: esResetSearch,
      searchFromHistory: esSearchFromHistory
    } = useElasticSearch(ES_INDEX, 20)

    // 是否显示搜索结果
    const showSearchResults = computed(() => esSearchResults.value.length > 0 || esLoading.value)
    
    // 是否显示搜索历史
    const showHistory = ref(false)

    // 加载搜索历史
    onMounted(() => {
      esLoadSearchHistory()
    })

    return {
      esSearchKeyword,
      esSearchResults,
      esSearchHistory,
      esLoading,
      esCurrentPage,
      esPageSize,
      esTotal,
      esTotalPages,
      esSearch,
      esSearchPage,
      esLoadSearchHistory,
      esClearSearchHistory,
      esResetSearch,
      esSearchFromHistory,
      showSearchResults,
      showHistory
    }
  },
  data() {
    return {
      searchText: '',
      activeIndex: 0,
      isHoverLeft: false,
      isHoverRight: false,
      menuArmed: false,        // 是否已由左侧激活，右侧才可保持
      hoverGraceActive: false, // 左→右或右→左移动间的过渡显示
      hoverTimer: null,        // 过渡隐藏定时器
      // 左侧列表分页：每页5条
      pageSize: 5,
      currentPage: 1,
      aiBanners: [
        '/upload/img.png',
        '/upload/img_1.png',
        '/upload/img_2.png',
        '/upload/img_4.png',
      ],
      categories: [],
      categoriesFirstLoading: true,
      categoriesTimer: null,
      jobTab: 'featured',
      jobsFeatured: [
        { id: 1, title: '中级Java开发工程师', salary: '12-17K', edu: '大专', city: '北京·海淀区', company: '巨橙莲', logo: '/upload/img.png' },
        { id: 2, title: '入职大厂-软件测试', salary: '8-13K', edu: '学历不限', city: '北京·海淀区', company: '北京幸运星极昼文化传媒', logo: '/upload/img_1.png' },
        { id: 3, title: 'Java【线上面试】', salary: '11-16K', edu: '大专', city: '北京·海淀区', company: '拓宽软件', logo: '/upload/img_2.png' },
        { id: 4, title: '算法实习/风控算法', salary: '5-8K', edu: '本科', city: '上海', company: '智趣屋', logo: '/upload/img_3.png' },
        { id: 5, title: '抖音审核！双休', salary: '6-9K', edu: '学历不限', city: '石家庄·裕华区', company: '博岳通信', logo: '/upload/img.png' },
        { id: 6, title: '数据分析师', salary: '10-15K', edu: '本科', city: '成都', company: '铭易融', logo: '/upload/img_1.png' },
        { id: 10, title: 'Python开发工程师', salary: '11-17K', edu: '本科', city: '深圳·南山区', company: '擎云科技', logo: '/upload/img_2.png' },
        { id: 11, title: '大数据工程师', salary: '15-22K', edu: '本科', city: '杭州·滨江区', company: '数元科技', logo: '/upload/img_3.png' },
        { id: 12, title: 'NLP算法工程师', salary: '18-30K', edu: '硕士', city: '北京·朝阳区', company: '语义智能', logo: '/upload/img.png' },
      ],
      jobsLatest: [
        { id: 14, title: '前端开发工程师', salary: '9-14K', edu: '本科', city: '成都', company: '星图科技', logo: '/upload/img_2.png' },
        { id: 15, title: 'Golang工程师', salary: '12-18K', edu: '本科', city: '杭州', company: '云杉网络', logo: '/upload/img_3.png' },
        { id: 16, title: '测试开发工程师', salary: '10-16K', edu: '本科', city: '北京', company: '时光科技', logo: '/upload/img.png' },
        { id: 17, title: '运维工程师', salary: '9-13K', edu: '大专', city: '西安·高新区', company: '秦岭云', logo: '/upload/img_1.png' },
        { id: 18, title: '产品经理', salary: '12-16K', edu: '本科', city: '广州·天河区', company: '南都数科', logo: '/upload/img_2.png' },
        { id: 19, title: 'UE4开发', salary: '13-20K', edu: '本科', city: '成都·高新区', company: '幻光互动', logo: '/upload/img_3.png' },
        { id: 20, title: '数据分析师', salary: '10-15K', edu: '本科', city: '上海·浦东新区', company: '聚数科技', logo: '/upload/img.png' },
        { id: 21, title: '安卓开发工程师', salary: '12-18K', edu: '本科', city: '南京·雨花台', company: '芯程科技', logo: '/upload/img_1.png' },
        { id: 22, title: '算法工程师（CV）', salary: '16-25K', edu: '硕士', city: '北京·海淀区', company: '图灵视觉', logo: '/upload/img_2.png' },
      ],
      companies: [
        {
          id: 'bytedance',
          name: '字节跳动',
          logo: '/upload/img.png',
          tags: ['D轮及以上', '10000人以上', '互联网'],
          jobs: [
            { title: 'hr招聘实习生', salary: '150-200元/天', meta: '北京 海淀区 中关村 · 5天/周 · 3个月 · 本科' },
            { title: '产品运营', salary: '22-35K·15薪', meta: '北京 朝阳区 望京 · 1-3年 · 本科' },
            { title: '服务运营-豆包', salary: '25-35K·15薪', meta: '北京 朝阳区 望京 · 3-5年 · 本科' },
          ],
        },
        {
          id: 'meituan',
          name: '美团',
          logo: '/upload/img_1.png',
          tags: ['不需要融资', '10000人以上', '互联网'],
          jobs: [
            { title: '下沉市场-校园业务运营', salary: '20-35K·15薪', meta: '北京 朝阳区 望京 · 3-5年 · 本科' },
            { title: 'C端用户产品', salary: '15-30K·15薪', meta: '北京 朝阳区 望京 · 经验不限 · 不限学历' },
            { title: '招2个会员电梯的水产员', salary: '8-9K', meta: '北京 丰台区 丽泽桥 · 经验不限 · 学历不限' },
          ],
        },
        {
          id: 'jd',
          name: '京东集团',
          logo: '/upload/img_2.png',
          tags: ['已上市', '10000人以上', '电子商务'],
          jobs: [
            { title: '产品实习生-北京', salary: '300-350元/天', meta: '北京 大兴区 亦庄 · 5天/周 · 3个月 · 本科' },
            { title: '客服', salary: '6-8K·13薪', meta: '北京 朝阳区 朝外 · 经验不限 · 大专' },
            { title: '供应链管理实习生', salary: '150-200元/天', meta: '北京 · 5天/周 · 3个月 · 本科' },
          ],
        },
        {
          id: 'mi',
          name: '小米',
          logo: '/upload/img_3.png',
          tags: ['已上市', '10000人以上', '互联网'],
          jobs: [
            { title: '小米汽车-总装技师（全职）', salary: '8-11K·15薪', meta: '北京 海淀区 上地 · 经验2年以下 · 中专/中职' },
            { title: 'HRBP（全国轮岗）', salary: '15-30K', meta: '北京 海淀区 海淀 · 10年以上 · 本科' },
            { title: '财务成本会计', salary: '15-30K·15薪', meta: '北京 海淀区 安宁庄 · 5-10年 · 本科' },
          ],
        },
        {
          id: 'kuaishou',
          name: '快手',
          logo: '/upload/img_4.png',
          tags: ['已上市', '10000人以上', '社交网络与媒体'],
          jobs: [
            { title: '产品实习生（急招）', salary: '200-250元/天', meta: '北京 海淀区 上地 · 4天/周 · 3个月 · 本科' },
            { title: '【大量招】测试开发工程师', salary: '35-65K·16薪', meta: '北京 海淀区 上地 · 3-5年 · 本科' },
            { title: '【急招】数字人生成', salary: '50-80K·16薪', meta: '北京 海淀区 上地 · 经验不限 · 硕士' },
          ],
        },
        {
          id: 'hema',
          name: '盒马鲜生',
          logo: '/upload/img.png',
          tags: ['不需要融资', '10000人以上', '生活服务(O2O)'],
          jobs: [
            { title: '盒马鲜生招聘店员/营业员', salary: '8-12K', meta: '北京 海淀区 紫竹桥 · 经验不限 · 学历不限' },
            { title: '龙德广场附近招聘超市店员', salary: '7-9K', meta: '北京 昌平区 天通苑 · 经验不限 · 学历不限' },
            { title: '配送员+提供车辆', salary: '13-14K', meta: '北京 海淀区 苏州桥 · 经验不限 · 学历不限' },
          ],
        },
      ],
    }
  },
  methods: {
    // ES搜索相关方法
    async handleSearch() {
      if (!this.searchText.trim()) {
        this.$message.warning('请输入搜索关键词')
        return
      }
      this.esSearchKeyword = this.searchText
      await this.esSearch(this.searchText, 1)
      this.showHistory = false
    },
    handleClearSearch() {
      this.searchText = ''
      this.esResetSearch()
      this.showHistory = false
    },
    async handlePageChange(page) {
      await this.esSearchPage(page)
    },
    async handleHistoryClick(keyword) {
      this.searchText = keyword
      await this.esSearchFromHistory(keyword)
      this.showHistory = false
    },
    
    async fetchCategories() {
      try {
        const res = await getCategories()
        // 兼容多种返回结构：
        // 1) 直接数组
        // 2) { data: [...] }
        // 3) 树形结构：children 表示下级分类（后端CategorySer返回）
        const list = Array.isArray(res) ? res : (res && Array.isArray(res.data) ? res.data : [])

        // 归一化为页面渲染需要的结构：
        // 左侧仅展示一级分类 name；
        // 右侧 groups 由二级分类构成，items 为三级分类名称数组。
        this.categories = list.map((root, idx) => {
          const level2 = Array.isArray(root.children) ? root.children : []
          const groups = level2.map(l2 => ({
            title: l2.name ?? '其它',
            items: (Array.isArray(l2.children) ? l2.children : []).map(l3 => l3.name ?? '未命名')
          }))
          return {
            id: root.id ?? idx,
            name: root.name ?? root.title ?? '未命名',
            // 无后端 hot 字段时，取部分三级名称作为展示标签（最多5个）
            hot: (groups.flatMap(g => g.items).slice(0, 5)) || [],
            groups,
          }
        })
        if (this.activeIndex >= this.categories.length) {
          this.activeIndex = 0
        }
        // 校正分页页码
        const totalPages = Math.max(1, Math.ceil(this.categories.length / this.pageSize))
        if (this.currentPage > totalPages) {
          this.currentPage = totalPages
        }
      } catch (e) {
        console.error('获取分类失败:', e)
      } finally {
        if (this.categoriesFirstLoading) this.categoriesFirstLoading = false
      }
    },
    prevPage() {
      if (!this.categories.length) return
      const totalPages = Math.max(1, Math.ceil(this.categories.length / this.pageSize))
      this.currentPage = this.currentPage - 1
      if (this.currentPage < 1) this.currentPage = totalPages
      const start = (this.currentPage - 1) * this.pageSize
      this.activeIndex = Math.min(start, this.categories.length - 1)
      this.$nextTick(() => {
        const el = this.$el.querySelector('.mega-left .mega-item.active')
        if (el && typeof el.scrollIntoView === 'function') {
          el.scrollIntoView({ block: 'nearest' })
        }
      })
    },
    nextPage() {
      if (!this.categories.length) return
      const totalPages = Math.max(1, Math.ceil(this.categories.length / this.pageSize))
      this.currentPage = this.currentPage + 1
      if (this.currentPage > totalPages) this.currentPage = 1
      const start = (this.currentPage - 1) * this.pageSize
      this.activeIndex = Math.min(start, this.categories.length - 1)
      this.$nextTick(() => {
        const el = this.$el.querySelector('.mega-left .mega-item.active')
        if (el && typeof el.scrollIntoView === 'function') {
          el.scrollIntoView({ block: 'nearest' })
        }
      })
    },
    /**
     * 鼠标进入左侧一级分类
     */
    handleLeftEnter() {
      this.isHoverLeft = true
      this.menuArmed = true
      this.hoverGraceActive = false
      if (this.hoverTimer) {
        clearTimeout(this.hoverTimer)
        this.hoverTimer = null
      }
    },
    /**
     * 鼠标离开左侧一级分类
     */
    handleLeftLeave() {
      // 鼠标离开左侧，不立即隐藏，给予过渡时间便于移到右侧
      this.isHoverLeft = false
      if (!this.isHoverRight) {
        this.hoverGraceActive = true
        if (this.hoverTimer) clearTimeout(this.hoverTimer)
        this.hoverTimer = setTimeout(() => {
          this.hoverGraceActive = false
          if (!this.isHoverRight && !this.isHoverLeft) {
            this.menuArmed = false
          }
          this.hoverTimer = null
        }, 200)
      }
    },
    /**
     * 鼠标进入右侧分类列表
     */
    handleRightEnter() {
      // 只有先由左侧激活过，右侧才能保持显示
      if (this.menuArmed) {
        this.isHoverRight = true
        this.hoverGraceActive = false
        if (this.hoverTimer) {
          clearTimeout(this.hoverTimer)
          this.hoverTimer = null
        }
      }
    },
    /**
     * 鼠标离开右侧分类列表
     */
    handleRightLeave() {
      // 离开右侧时，如果左侧也未悬停，则在过渡期后隐藏
      this.isHoverRight = false
      if (!this.isHoverLeft) {
        this.hoverGraceActive = true
        if (this.hoverTimer) clearTimeout(this.hoverTimer)
        this.hoverTimer = setTimeout(() => {
          this.hoverGraceActive = false
          if (!this.isHoverLeft && !this.isHoverRight) {
            this.menuArmed = false
          }
          this.hoverTimer = null
        }, 200)
      }
    },
    // 离开整个多级区域：立刻关闭
    handleMegaLeave() {
      if (this.hoverTimer) {
        clearTimeout(this.hoverTimer)
        this.hoverTimer = null
      }
      this.isHoverLeft = false
      this.isHoverRight = false
      this.hoverGraceActive = false
      this.menuArmed = false
    },
  },
  mounted() {
    this.fetchCategories()
    // 轮询以实现“实时更新”效果，可按需调整频率
    this.categoriesTimer = setInterval(() => {
      this.fetchCategories()
    }, 10000)
  },
  beforeUnmount() {
    if (this.categoriesTimer) {
      clearInterval(this.categoriesTimer)
      this.categoriesTimer = null
    }
    if (this.hoverTimer) {
      clearTimeout(this.hoverTimer)
      this.hoverTimer = null
    }
  },
}
</script>

<style scoped>
.page { padding: 24px; }

.search-wrapper {
  width: 50%;
  margin: 40px auto 0 auto;
  position: relative;
}

/* 搜索历史样式 */
.search-history {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin-top: 8px;
  padding: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-title {
  font-size: 14px;
  color: #666;
  font-weight: 600;
}

.history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-tag {
  cursor: pointer;
  transition: all 0.3s;
}

.history-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 194, 147, 0.3);
}

/* 搜索结果区域样式 */
.search-results-section {
  width: 80%;
  margin: 32px auto;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.results-header h3 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.result-card {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s;
  cursor: pointer;
}

.result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 194, 147, 0.2);
  border-color: #00c293;
}

.result-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.result-desc {
  font-size: 14px;
  color: #666;
  margin: 8px 0;
  line-height: 1.6;
}

.result-desc span {
  margin-right: 8px;
}

.result-time {
  font-size: 12px;
  color: #999;
  margin: 8px 0 0 0;
}

.search-pagination {
  display: flex;
  justify-content: center;
  padding-top: 16px;
}

.search-input :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e5e5 inset;
}

.mega {
  display: flex;
  width: 80%;
  margin: 24px auto 0 auto;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
  /* 精准控制高度：5条一级分类 + 底部pager */
  --row-h: 64px;      /* 单行高度（含内边距） */
  --pager-h: 40px;    /* 底部分页高度 */
  height: calc(var(--row-h) * 5 + var(--pager-h));
}

.mega-left {
  width: 420px;
  border-right: 1px solid #f5f5f5;
  background: #fafafa;
  height: 100%;
  overflow-y: auto;
}

.mega-item {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--row-h);
  padding: 8px 16px;
  cursor: pointer;
  color: #333;
}
.mega-item:hover, .mega-item.active { background: #f0fffb; }
.mega-name { font-weight: 600; }
.mega-hot { margin-left: 8px; display: inline-flex; gap: 6px; }
.hot-tag { color: #999; font-size: 12px; background: #f5f5f5; padding: 2px 6px; border-radius: 3px; }
.arrow { margin-left: auto; color: #bbb; }

.pager { padding: 8px 16px; color: #999; font-size: 12px; border-top: 1px solid #f5f5f5; }

/* 底部分页箭头 */
.mega-pager {
  width: 80%;
  margin: 8px auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.pager-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: #666;
  cursor: pointer;
}
.pager-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pager-btn:hover { background: #f5f5f5; }
.pager-text { color: #999; font-size: 12px; margin: 0 6px; }

.mega-right {
  flex: 1;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.carousel-wrapper {
  width: 100%;
  height: 100%;
}

.group { margin-bottom: 18px; padding: 16px 24px; }
.group-title { color: #666; margin-bottom: 8px; }
.group-items { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.group-link { color: #333; text-decoration: none; font-size: 14px; }
.group-link:hover { color: #00c293; }

/* 推荐职位 */
.jobs {
  width: 80%;
  margin: 32px auto 60px auto;
}
.jobs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.jobs-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
}
.jobs-tabs { display: flex; gap: 20px; }
.jobs-tab { cursor: pointer; color: #666; }
.jobs-tab.active { color: #00c293; font-weight: 600; }

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.job-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
}
.job-row { display: flex; align-items: center; justify-content: space-between; }
.job-title { font-size: 16px; color: #333; font-weight: 600; }
.job-salary { color: #ff4d4f; font-weight: 700; }
.job-meta { margin-top: 8px; color: #999; font-size: 12px; }
.job-footer { margin-top: 14px; display: flex; align-items: center; gap: 10px; color: #666; }
.job-logo { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }

/* 企业推荐 */
.companies { width: 80%; margin: 16px auto 60px auto; }
.companies-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.companies-title { font-size: 28px; font-weight: 700; color: #333; }
.companies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.company-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 8px; padding: 16px; }
.company-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.company-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.company-info { display: flex; flex-direction: column; gap: 4px; }
.company-name { font-weight: 700; color: #333; }
.company-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 12px; color: #999; background: #f6f6f6; padding: 2px 6px; border-radius: 3px; }
.company-jobs { display: grid; gap: 10px; margin-top: 8px; }
.company-job { background: #fafafa; border: 1px dashed #eee; border-radius: 6px; padding: 10px; }
.cj-title { color: #333; font-weight: 600; }
.cj-salary { color: #ff4d4f; font-weight: 700; float: right; }
.cj-meta { margin-top: 6px; color: #999; font-size: 12px; clear: both; }
.company-more { margin-top: 12px; text-align: center; }
</style>